<template>
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
        <eui-card title="基本信息" showTitleLine="true" h-padding="20" type="upDownSingle">
            <template v-slot:content>
                <view class="m-main-top">
                    <eui-text :value="codeWithName(mainData.c_store_id)" type="textname" title="机构" occupy />
                    <eui-text v-model="mainData.c_adno" :name="getRelatedName('rdsDeparts', mainData.c_adno)" type="titlename" title="部门" />
                    <eui-text :value="getUserDictName('变价原因', mainData.c_chg_type)" type="name" title="变价原因" />
                    <eui-text :value="getDictName('影响属性', mainData.c_affect_fields)" :range="effectPropsItems"
                        type="multiSelector" title="属性" occupy style="flex-wrap: wrap;" />
                    <eui-text v-model="mainData.c_effect_da" type="date" title="生效日期" occupy />
                    <eui-text v-model="mainData.c_mk_userno" :name="getRelatedName('rdsUsers', mainData.c_mk_userno)" type="titlename" title="录入" />
                    <eui-text v-model="mainData.c_mk_dt" type="rdstime" />
                </view>
            </template>
        </eui-card>
        <view class="paging-view">
            <eui-paging ref="paging" v-model="listManager" :fixed="false" :refresher-enabled="false"
                :default-page-size="10" :loading-more-enabled="true" :show-loading-more-when-reload="true">
                <view v-for="(item, index) in listManager" class="m-list-top">
                    <eui-text  :value="`[${item.c_gcode}]${item.c_gname}`" type="name" :title="`${index + 1}. 商品`"
                        occupy />
                    <eui-text v-model="item.c_barcode" type="name" title="条码" />
                    <eui-text v-model="item.c_b_n" :name="item.c_unit" type="slash" title="规格/单位" />
                    <eui-text v-model="item.c_adno" :name="getRelatedName('rdsDeparts', item.c_adno)" type="contrast" title="部门" />
                    <eui-text :value="getRelatedName('rdsGdsclasses', item.c_ccode)" type="contrast" title="品类" />
                    <eui-text :value="getDictName('价格敏感度', item.c_price_sens)" type="contrast" title="价格敏感度" />
                    <eui-text :value="getDictName('价格类型', item.c_is_barcode)" type="contrast" title="价格类型" />
                    <eui-text v-model="item.c_min_price" :oldValue="item.c_min_price_old" type="contrastnumber"
                        title="最低售价" :valueStyle="currentStyle(item.c_min_price,item.c_min_price_old)"/>
                    <eui-text v-model="item.c_advice_price" :oldValue="item.c_advice_price_old"
                        type="contrastnumber" title="建议售价" :valueStyle="currentStyle(item.c_advice_price,item.c_advice_price_old)"/>
                    <eui-text v-model="item.c_price" :oldValue="item.c_price_old" type="contrastnumber"
                        title="售价" :valueStyle="currentStyle(item.c_price,item.c_price_old)"/>
                    <eui-text v-model="item.c_price_mem" :oldValue="item.c_price_mem_old" type="contrastnumber"
                        title="会员价" :valueStyle="currentStyle(item.c_price_mem,item.c_price_mem_old)"/>
                    <eui-text v-model="item.c_wprice" :oldValue="item.c_wprice_old" type="contrastnumber"
                        title="批发价" :valueStyle="currentStyle(item.c_wprice,item.c_wprice_old)"/>
                    <eui-text v-model="item.c_gross_profit" :oldValue="item.c_gross_profit_old"
                        type="contrastnumber" title="采购毛利率(%)" :valueStyle="currentStyle(item.c_gross_profit,item.c_gross_profit_old)"/>
                    <eui-text v-model="item.c_gross_profit_cost" :oldValue="item.c_gross_profit_cost_old"
                         type="contrastnumber" title="成本毛利率(%)" :valueStyle="currentStyle(item.c_gross_profit_cost,item.c_gross_profit_cost_old)"/>
                    <eui-text v-model="item.c_pt_in" type="contrastnumber" :precision="4" title="当前采购进价" />
                    <eui-text v-model="item.c_pt_cost" type="contrastnumber" :precision="4" title="成本价" />
                    <eui-text v-model="item.c_last_pt_in" type="contrastnumber" :precision="4" title="最后进价" />
                </view>
            </eui-paging>
        </view>
    </view>
</template>

<script setup type="ts">
import { getRelatedName, getUserDictName,getStoreRelatedName } from '../RdsViews/components/RelatedName.js';
import { rdsRequest, getRdsUrl } from '@/hooks/rdsServices';
import service from '@/common/service';
import { onMounted, ref } from "vue";

const rdsUrl = getRdsUrl();
const props = defineProps({
    data: {
        type: Object
    },
    windowWidth: {
        type: Number,
        default: 0,
    }
});
const effectPropsItems = ref([
    { text: '最低售价', value: 'c_min_price', checked: false },
    { text: '建议售价', value: 'c_advice_price', checked: false },
    { text: '售价', value: 'c_price', checked: false },
    { text: '会员价', value: 'c_price_mem', checked: false },
    { text: '批发价', value: 'c_wprice', checked: false }
]);
const mainData = ref({})
const detailData = ref([])
const rdsDict = ref([])
const listHeight = ref(300);

const paging = ref(null);
const listManager = ref([]);

onMounted(async () => {
    await getListHeight();
    service.enjoyShowLoading('正在加载...');
    await getAllDicData();
    if (props.data.BillId) {
        await billQuery(props.data.BillId);
    }
    service.enjoyHideLoading();
})

// 获取列表高度
const getListHeight = async () => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数
            let info = uni.createSelectorQuery().select(".footer-view");
            info.boundingClientRect(function (data) { //data - 各种参数
                //获取列表高度
                let height = res.windowHeight - (data?.top  || 0);
                //转换rpx
                listHeight.value = height / (res.windowWidth / 750) - 100;
            }).exec()
        }
    });
};
const currentStyle = (value, oldValue) => {
    if(value === oldValue){
        return 'color: black';
    }
    if (value > oldValue) {
        return 'color: #ff0000';
    }
    return 'color: #008000';
}

const codeWithName = (localValue) => {
    let list = [];
    localValue?.split(',').map(item => {
        const name = getStoreRelatedName(item);
        if (name) {
            list.push("[" + item + "]" + name);
        } else {
            list.push("[" + item + "]");
        }
    })
    return list.join(',');
}

// 获取字典数据
const getAllDicData = async () => {
    rdsDict.value = await service.getLocalStorage('rdsDict');
}
const getDictName = (key, value) => {
    const dictMap = rdsDict.value.find(x => x.c_class_name === key && x.c_id === value);
    return dictMap ? dictMap.c_name : ''
}
const billQuery = async (billId) => {
    if (!billId) {
        paging.value.setLocalPaging([]);
        return;
    }
    const result = await rdsRequest(rdsUrl.bcApi, '商品变价单', 'EnjoyBillQuery', { BillId: billId }, '081');
    if (result.ds.length > 0) {
        mainData.value = result.ds[0];
        detailData.value = result.ds1;
        effectPropsItems.value.forEach(item => {
            if (mainData.value.c_affect_fields.indexOf(item.value) > -1) {
                item.checked = true;
            } else {
                item.checked = false;
            }
        });
        paging.value.setLocalPaging(result.ds1);
    } else {
        paging.value.setLocalPaging([]);
    }
}
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '@/main.scss';

.footer-view {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.paging-view {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: $uni-bg-color-inverse;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
    padding: 20rpx;
}


.m-main-top {
    display: grid;
    grid-template-columns: 51% 49%;
}

.m-list-top {
    display: grid;
    grid-template-columns: 51% 49%;
    border-bottom: 1px solid $uni-border-color;
}

.image-min {
    width: 100%;
    height: 150rpx;
    opacity: 0.6;
    margin-top: -20rpx;
}

.no-data-text {
    text-align: center;
    color: #cccccc;
    font-size: 26rpx;
    margin-top: -20rpx;
}
</style>
